<!DOCTYPE html>
<html lang="zh-cn" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="renderer" content="webkit">

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <title></title>
    <link rel="stylesheet" href="/backend/css/pintuer.css">
    <link rel="stylesheet" href="/backend/css/admin.css">
    <script src="/backend/js/jquery.js"></script>
    <script src="/backend/js/pintuer.js"></script>
    <script src="/backend/js/vuejs-2.5.16.js"></script>
    <script src="/backend/js/axios-0.18.0.js"></script>
    <script src="/backend/js/verify.js"></script>

    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        .info {
            z-index: 999;
            width: auto;
            min-width: 22rem;
            padding: .75rem 1.25rem;
            margin-left: 1.25rem;
            position: fixed;
            top: 1rem;
            background-color: #fff;
            border-radius: .25rem;
            font-size: 14px;
            color: #666;
            box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=gwXMusq2YYF5EryTuHGn0Wn6uD0V438M"></script>



</head>
<body>



<div  id="moviesDiv">
    <table align="center">
        <tr>
            <td width="10%" align="left" colspan="1" >
                <BR><img :src="movies.avatar" alt="" width="150" height="150"/></td>

            <td  colspan="1" align="left"><br><br><br><ul>
                <li>昵称：{{movies.nickname}}<br></li>
                <li v-if="movies.gender == 'man'">性别：男<br></li>
                <li v-if="movies.gender == 'woman'">性别：女<br></li>
                <li>年龄：{{movies.age}}</li>
           <li>生日：{{movies.birthday}}</li>
                <li>当前位置：{{movies.city}}</li>
             </ul>
        </td>

        </tr>
    </table>


<!--    <div class="panel-head" id="add"><strong><span class="icon-pencil-square-o"></span>增加影视内容</strong></div>
    <div class="body-content">
        <form method="post" class="form-x">
            <input type="hidden" name="id" v-model="movies.id">
            <div class="form-group">
                <div class="label">
                    <label>昵称：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" v-model="movies.nickname" name="title"/>
                    <div class="tips"></div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>导演：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" v-model="movies.director" name="director"/>
                    <div class="tips"></div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>主要演员：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" v-model="movies.actors" name="actors"/>
                    <div class="tips"></div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>播放链接：</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" v-model="movies.url" name="url"/>
                    <div class="tips"></div>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>影视图片：</label>
                </div>
                <div class="field">
                    <input type="file" id="url1" name="picPath" class="input tips" style="width:25%; float:left;"
                           @change="uploadFile()"
                           data-toggle="hover" data-place="right"/>
                    <div class="tipss">图片尺寸：1300*500</div>
                </div>
            </div>

            <div class="form-group" v-show="movies.picPath">
                <div class="label">
                    <label>原图片：</label>
                </div>
                <div class="field">
                    <img v-bind:src="movies.picPath" alt="" width="300" height="100"/>
                </div>
            </div>
            <div class="clear"></div>

            <div class="form-group">
                <div class="label">
                    <label>影视分类标题：</label>
                </div>
                <div class="field">
                    <select name="cid" class="input w50" v-model="movies.cid">
                        <option value="">请选择分类</option>
                        <option v-for="c in categoryList" :value="c.id">{{c.categoryName}}</option>

                    </select>
                    <div class="tips"></div>
                </div>
            </div>


            <div class="form-group">
                <div class="label">
                    <label>影视描述：</label>
                </div>
                <div class="field">
                    <textarea class="input" style="height:250px; border:1px solid #ddd;" v-model="movies.contentDesc"
                              name="contentDesc"></textarea>
                    <div class="tips"></div>
                </div>
            </div>

            <div class="clear"></div>

            <div class="form-group">
                <div class="label">
                    <label>影视关键字：</label>
                </div>
                <div class="field">
                    <input type="text" class="input" v-model="movies.keyword" name="keyword"/>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label>排序：</label>
                </div>
                <div class="field">
                    <input type="number" class="input w50" v-model="movies.orderNo" name="orderNo"/>
                    <div class="tips"></div>

                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label>上映时间：</label>
                </div>
                <div class="field">
                    <input type="date" class="input w50" v-model="movies.showTime" name="showTime"/>
                </div>
            </div>

            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <a class="button bg-main icon-check-square-o" @click="save()"> 提交</a>
                </div>
            </div>
        </form>
    </div>-->

</div>


<!--地图显示-->
<div id="container"></div>
<script type="text/javascript">

    const app = new Vue({
        el: '#moviesDiv',
        data: {
            movies: {},
            categoryList: [],
        },

        methods: {


            // 根据id查询
            findById(id) {
                axios.get("/management/manage/findById?id=" + id).then(resp => {
                    var resultInfo = resp.data;
                    // if (resultInfo.code == 1) {
                    this.movies = resultInfo;
                    var jingDu = resultInfo.jingDu;
                    var weiDu = resultInfo.weiDu;
                    // 地图
                    var map = new BMapGL.Map('container'); // 创建Map实例
                    var point = new BMapGL.Point(jingDu, weiDu)
                    map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
                    var marker = new BMapGL.Marker(point);  // 创建标注
                    map.addOverlay(marker);              // 将标注添加到地图中
                    var opts = {
                        width : 200,     // 信息窗口宽度
                        height: 100,     // 信息窗口高度
                        title : "所在位置" , // 信息窗口标题
                        message:"这里是用户上次更新的位置"
                    }
                    var infoWindow = new BMapGL.InfoWindow(resultInfo.city, opts);  // 创建信息窗口对象
                    marker.addEventListener("click", function(){
                        map.openInfoWindow(infoWindow, point); //开启信息窗口
                    });
                    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放



                })
            }
        },



        created() {
            // 获取影视id
            if (location.search.split('=')[1]) {
                let id = location.search.split('=')[1];
                this.findById(id);
            }
        }
    })
</script>
</body>
</html>